import React from 'react'
import {Icon, Select, Tag} from 'antd'
import '../../less/index.less'
import rankingStatus from '../../constant/ranking-status'
import {FormattedMessage} from 'react-intl'

const Option = Select.Option

class SelectStatus extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value: 'NoScore',
      editable: false
    }
  }
  componentWillReceiveProps (nextProps) {
    const {value} = nextProps
    this.setState({value})
  }
  handleChange (value) {
    this.setState({value})
  }

  checkAssignmentRanking () {
    this.setState({editable: false})
    if (this.props.onChange) {
      this.props.onChange(this.state.value)
    }
  }

  editAssignmentRanking () {
    this.setState({editable: true})
  }

  render () {
    const {value, editable} = this.state
    const {disable, optionals} = this.props
    return (
      <div>
        {editable
          ? <div>
            <Select value={value} style={{width: 110}} onChange={this.handleChange.bind(this)}>
              {optionals.map((optional, index) => {
                return <Option value={optional.key} key={index}><FormattedMessage id={optional.value} /></Option>
              })
              }
            </Select>
            {disable
              ? ''
              : <span>&nbsp;&nbsp;
                <Icon type='check' onClick={this.checkAssignmentRanking.bind(this)} />
              </span>}
          </div>
          : <div>
            <Tag color='blue' style={{fontSize: '14px'}}>
              <FormattedMessage id={rankingStatus[value]} />
            </Tag>
            {disable
              ? ''
              : <span>
                <Icon type='edit' onClick={this.editAssignmentRanking.bind(this)} />
              </span>}
          </div>
            }
      </div>
    )
  }
}

export default SelectStatus
